<template>
  <div>
    <div class="header">
      <div>
        <h4 style="display: inline-block;margin-right:10px">执行中任务</h4>
        <el-tooltip class="item" effect="light" placement="right-end">
          <template #content>
            <p>运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消）</p>
            <p>派送率=派送中/(待派送+派送中+已签收+拒收）</p>
          </template>
          <el-button type="text" icon="el-icon-question" />
        </el-tooltip>
      </div>
      <span class="time">
        <i style="font-style: normal;"><el-button type="text" :loading="flag" @click="reflesh">
          <template>
            <i v-if="!flag" class="el-icon-refresh" />
          </template>
        </el-button>{{ time }}</i>
      </span>
    </div>
    <div class="content">
      <div id="charts1" />
      <div id="charts2" />
    </div>
    <div id="customText" />
  </div></template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { mapGetters, mapActions } from 'vuex'
export default {

  data() {
    return {
      flag: false,
      time: new Date().toLocaleString().replaceAll('/', '-')
    }
  },
  computed: {
    ...mapGetters('dashboard', ['listData']),
    list() {
      return this.listData.todayData ? this.listData.todayData : {}
    }
  },
  watch: {
    list: {
      deep: true,
      handler() {
        // 初始化 echarts 实例
        const charts1 = echarts.init(document.getElementById('charts1'))
        const charts2 = echarts.init(document.getElementById('charts2'))
        // 绑定数据和配置项并渲染
        charts1.setOption(this.fn(this.list.taskInTransitRate, ['#e25c3e', '#ffe5e0', '#eb9482'], ['运输中', this.list.taskInTransitNumber]))
        charts2.setOption(this.fn(this.list.taskInDeliveryRate, ['#ffc45d', '#fff1d9', '#fed287'], ['派送中', this.list.taskInDeliveryNumber]))
      }
    }
  },
  mounted() {

  },
  methods: {
    ...mapActions('dashboard', ['getData']),
    async reflesh() {
      this.flag = true
      try {
        await this.getData()
      } catch (error) {
        this.$message.error('刷新失败，请重试')
        this.flag = false
      }
      this.$message.success('刷新成功')
      this.flag = false
      this.time = new Date().toLocaleString().replaceAll('/', '-')
    },
    fn(val, color, text) {
      return {
        series: [{
          type: 'liquidFill',
          data: [val / 100], // 填充的数据值，范围在[0, 1]之间
          radius: '80%', // 水球图的半径
          shape: 'circle', // 水球的形状，可以是 'circle' 或 'rect'
          color: [color[0]], // 水球的颜色
          backgroundStyle: {
          // 水球图的背景颜色，设为透明
            color: color[1]
          },
          outline: {
            show: true,
            borderDistance: 6, // 内外边框的距离
            itemStyle: {
              borderWidth: 1, // 外侧边框宽度
              borderColor: color[2]// 外侧边框颜色
            }
          },
          label: {
            show: true,
            fontSize: 20,
            insideColor: '#fff' // 水球内部文本的颜色
          }
        }

        ],
        graphic: [{
          type: 'text',
          left: 'center',
          top: '93%',
          style: {
            text: [
              '{a|' + text[0] + '}' + '  ' +
              '{b|' + text[1] + '}' // 使用b样式设置text[1]的颜色
            ],
            rich: {
              a: {
                font: '18px Arial',
                fill: '#000'
              },
              b: {
                font: '18px Arial',
                fill: color[0] // 设置text[1]的颜色为红色
              }
            }
          },
          onclick: () => {
            // ...
          }
        }]
      }
    }
  }
}
</script>

  <style lang="scss" scoped>
  .header{
      h4{
          margin: 0;
      }
      display: flex;
      justify-content: space-between;
      .time{
      font-size: 14px;
      color: #818693;
      display: flex;
      -webkit-box-align: center;
      cursor: pointer;
      }
  }
  .content{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 75%;
      margin: 0 auto;
      height: 208px;
      margin-top: 12px;
      div{
          width: 50%;
          height: 220px;
      }
  }
  .el-icon-refresh{
  color: #e15638;
  font-weight: 900;
  font-size: 16px;
 }
  </style>

